<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
<div class="layui-card-body">
<form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
      <input name="id" hidden/>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="examPlanId" name="examPlanId" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="examListId" name="examListId" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="subjectId" name="subjectId" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="subjectName" name="subjectName" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="examRoomId" name="examRoomId" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="classId" name="classId" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="studentId" name="studentId" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">学生考号</label>
      <div class="layui-input-block">
        <input type="stuExamNum" name="stuExamNum" placeholder="请输入学生考号" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">座位号</label>
      <div class="layui-input-block">
        <input type="stuSeatNum" name="stuSeatNum" placeholder="请输入座位号" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label">成绩</label>
      <div class="layui-input-block">
        <input type="score" name="score" placeholder="请输入成绩" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="questionId" name="questionId" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
        <div class="layui-form-item">
      <label class="layui-form-label"></label>
      <div class="layui-input-block">
        <input type="remark" name="remark" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
  <div class="layui-form-item">
  <div class="layui-input-block">
    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
    <button  class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
  </div>
</div>
</form>
</div>
</div>

<div class="table_div">
  <div id="searchParam"  shiro:hasPermission="dlExamResult:list">
    <div class="layui-form-item">
      <div class="layui-input-inline">
        <input type="text" id="key" class="layui-input"  autocomplete="off" placeholder="请输入">
      </div>

      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <button class="layui-btn"   id="export">导出全部</button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>

<div hidden id="studentDiv">
    <div class="panel-heading title"></div>
    <div class="layui-card-body">
        <table class="layui-table" id="studentTab" lay-filter="studentTable" ></table>
    </div>
</div>

<script type="text/html" id="tool">
  <a class="layui-btn layui-btn-xs" lay-event="input" shiro:hasPermission="dlExamResult:update">成绩录入</a>
  <a class="layui-btn layui-btn-xs" lay-event="export" shiro:hasPermission="dlExamResult:export">导入录入</a>
  <a class="layui-btn layui-btn-xs" lay-event="download" shiro:hasPermission="dlExamResult:list">下载模板</a>
</script>

</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var studentTableIns;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;


  var gradeDatas = "[[${@dlGradeService.getGrades()}]]".replace(/&quot;/g,"\"");
  var classDatas = "[[${@dlClassService.getClassList()}]]".replace(/&quot;/g,"\"");


  layui.use(['table', 'layer', 'laydate'], function () {

    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/dlExamResult/myList' //数据接口
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: '', sort: true, hide: true},
          {field: 'examTitle', title: '考试标题', sort: true},
          {field: 'gradeId', title: '年级', sort: true, templet: function (item) {
                  return CoreUtil.getBeanLabel(gradeDatas, item.gradeId, "id", "gradeNameLabel");
              }},
          {field: 'className', title: '班级', sort: true, templet: function (item) {
                return CoreUtil.getClassLabel(classDatas, item.classId);
              }},
          {field: 'courseName', title: '考试科目', sort: true},
          {width: 300, toolbar: "#tool", title: '操作'}
        ]
      ]
    });


      studentTableIns = table.render({
          elem: '#studentTab'
          , contentType: 'application/json'
          , headers: {"authorization": token}
          , page: true //开启分页
          , limit: 50
          , method: 'POST'
          , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
              return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                  "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
              }
          }
          , cols: [
              [
                  {type: 'checkbox', fixed: 'left'},
                  {field: 'id', title: 'ID', sort: true, hide: true},
                  {field: 'studentName', title: '学生姓名', sort: true},
                  {field: 'examRoomName', title: '考场', sort: true},

                  {field: 'totalScore', title: '总分', sort: true},
                  {field: 'seatNum', title: '座位号', sort: true},
                  {field: 'score', title: '得分', sort: true, edit: 'text'},
                  {field: 'remark', title: '备注', sort: true, edit: 'text'}
              ]
          ]
      });

    table.on('rowDouble(showTable)', function (obj) {
        var data = obj.data;
        loadStudentScoreTab(data.id);
        openWin(data.examTitle + " -- " + data.courseName);
    });


      table.on('edit(studentTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
          console.log(obj.value); //得到修改后的值
          console.log(obj.field); //当前编辑的字段名
          console.log(obj.data); //所在行的所有相关数据
          var params = {};
          params[obj.field] = obj.value;
          params.id = obj.data.id;

          CoreUtil.sendPut("/dlExamScore/update",params, function (res) {
                layer.msg("保存成功");
          });
      });


    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      if(obj.event == "input"){
          loadStudentScoreTab(data.id);
          openWin(data.examTitle + " -- " + data.courseName);
      }
    });

    //导出
    $('#export').on('click', function () {
      //原先分页limit
      var exportParams = {
        limit: 10000,
        key: $("#key").val()
      };
      CoreUtil.sendPost("/dlExamResult/listByPage", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });

      //删除
      var tipDialog=function (ids) {
          layer.open({
              content: "确定要删除么?",
              yes: function(index, layero){
                  layer.close(index); //如果设定了yes回调，需进行手工关闭
                  CoreUtil.sendDelete("/dlExamResult/delete",ids,function (res) {
                      layer.msg(res.msg, {time:1000},function () {
                          search();
                      });
                  });
              }
          });
      };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/dlExamResult/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut("/dlExamResult/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }

      return false;
    });
  });



    function openWin(subject) {

        layer.open({
            type: 1,
            content: $('#studentDiv'),
            area: ['1000px', '700px'],
            title: subject + "成绩录入",
            maxmin: true,
            btn: ["保存"],
            yes: function (index, layero) {
                layer.close(index);
            }
        });
    }


  function loadStudentScoreTab(resultId) {
      studentTableIns.reload({
          url: '/dlExamScore/listByPage', //数据接口
          where: {
              resultId: resultId
          }
      });
  }

  //执行查询
  function search() {
    //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
        key: $("#key").val()
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };

  $(document).on('keydown', '.layui-input',
      function(event) {
          var td = $(this).parent('td');
          var index = td.index();
          var tr = td.parent('tr');
          switch (event.key) {
              case "ArrowUp"://上键
                  tr['prev']().children('td').eq(index).click();
                  break;
              case "ArrowDown"://下键
                  tr['next']().children('td').eq(index).click();
                  break;
              case "ArrowLeft"://左键
                  td['prevAll']('[data-edit="text"]:first').click();
                  break;
              case "ArrowRight"://右键
                  td['nextAll']('[data-edit="text"]:first').click();
                  break;
          }
      }
  );
</script>